<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1500"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :rowSelectInvert="rowSelectInvert"
      @initChosenIds="initChosenIds"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="海报文案">
            <a-input
              style="width: 200px"
              v-decorator="['copyContent']"
              placeholder="请输入海报文案"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分类">
            <a-select
              placeholder="选择文案分类"
              style="width: 160px"
              :options="copyList"
              v-decorator="['copywritingCategoryId']"
            >
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <a-button type="primary" @click="addText">新增文案</a-button>
        <a-button type="danger" @click="allDel">批量删除</a-button>
        <a-button
          type="primary"
          @click="openClassify"
          @cancel="closeClassifyModal"
        >
          文案分类管理
        </a-button>
      </template>

      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="seeTextDetail(record)"
            >编辑</a
          >
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="delCopy([record.id])"
            >删除</a
          >
        </a-space>
      </template>
    </search-table>
    <textClassify
      :addVisible="classifyVisible"
      @cancel="closeClassifyModal"
    ></textClassify>
    <addTextModal
      ref="addTextModal"
      @refresh="refreshTable"
      @close="addTextModalClose"
      :record="record"
    ></addTextModal>
  </div>
</template>
<script>
import textClassify from "./components/text/textClassify.vue";
import addTextModal from "@/views/menuPage/gallery/contentManagement/posterManage/stencils/components/components/text/addTextModal";
export default {
  name: "PosterText",
  components: {
    textClassify,
    addTextModal,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "goldenhome/gh/poster_admin/poster/copywriting/page",
      columns: [
        {
          title: "海报文案",
          dataIndex: "copyContent",
          key: "copyContent",
          align: "center",
        },
        {
          title: "文案分类",
          dataIndex: "getCopywritingCategorName",
          key: "getCopywritingCategorName",
          align: "center",
        },
        {
          title: "主图排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
        },
        {
          title: "最后编辑时间",
          dataIndex: "updateDate",
          key: "updateDate",
          align: "center",
        },
        {
          title: "创建人",
          dataIndex: "userName",
          key: "userName",
          align: "center",
        },
        {
          title: "创建账号",
          dataIndex: "userPhone",
          key: "userPhone",
          align: "center",
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
          align: "center",
        },
        {
          title: "所属店铺",
          dataIndex: "shopName",
          key: "shopName",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      chosenIds: [], // 不同分页下被选中的表格行id集合
      allSelectedRows: [], // 不同分页下被选中的表格行
      classifyVisible: false,
      record: {},
      copyList: [],
    };
  },
  mounted() {
    this.getCopyList();
  },
  methods: {
    addTextModalClose() {
      this.getCopyList();
    },
    async getCopyList() {
      const res = await this.$get(
        "goldenhome/gh/poster_admin/copywriting/category/list"
      );
      if (res?.returnCode == 1000) {
        this.copyList = res?.dataInfo?.map((item) => {
          return {
            title: item.name,
            id: item.id,
            key: item.id,
          };
        });
      }
    },
    // 查看文案详情
    seeTextDetail(row) {
      this.record = row;
      this.$refs.addTextModal.visible = true;
    },
    // 批量删除
    allDel() {
      if (this.chosenIds.length == 0) {
        this.$message.warning("请至少选择一条文案");
        return;
      }
      this.delCopy(this.chosenIds);
    },
    // 删除文案分类
    delCopy(id) {
      this.$confirm({
        title: "删除提示",
        content: "删除后不可恢复,确认删除",
        onOk: async () => {
          await this.$post(
            "goldenhome/gh/poster_admin/poster/copywriting/delete",
            [...id]
          );
          this.refreshTable();
        },
      });
    },
    // 刷新表格
    refreshTable() {
      this.getCopyList();
      this.$refs.searchtable.refreshTable();
    },
    // 清空已选中
    initChosenIds() {
      this.chosenIds = [];
      this.allSelectedRows = [];
    },
    // 表格单行选择
    rowSelectionSelect(record, selected) {
      if (!selected) {
        this.allSelectedRows.splice(
          this.allSelectedRows.findIndex((item) => item.id == record.id),
          1
        );
        this.chosenIds.splice(
          this.chosenIds.findIndex((item) => item == record.id),
          1
        );
      }
    },
    // 表格任意行发生选择或取消选择时回调
    rowSelectionChange(selectedRowKeys, selectedRows) {
      let _this = this;
      if (selectedRows.length > 0) {
        selectedRows.forEach((item) => {
          if (!_this.chosenIds.includes(item.id)) {
            _this.chosenIds.push(item.id);
            _this.allSelectedRows.push(item);
          }
        });
        selectedRowKeys = this.chosenIds;
        this.$refs.searchtable.selectedRowKeys = this.chosenIds;
      } else {
      }
    },
    rowSelectInvert(selected, selectedRows, changeRows) {
      if (!selected) {
        let ids = [];
        changeRows.forEach((item) => {
          ids.push(item.id);
        });
        this.chosenIds = this.chosenIds.filter(function (val) {
          return ids.indexOf(val) === -1;
        });
        let arr = [];
        this.allSelectedRows.forEach((item) => {
          if (this.chosenIds.includes(item.id)) {
            arr.push(item);
          }
        });
        this.allSelectedRows = arr;
      }
    },
    addText() {
      this.record = {};
      this.$refs.addTextModal.visible = true;
    },
    // 打开分类管理弹窗
    openClassify() {
      this.classifyVisible = true;
    },
    closeClassifyModal() {
      this.classifyVisible = false;
      this.getCopyList();
    },
  },
};
</script>
<style lang="less" scoped>
</style>
